import { Todo } from "@/model";
import React, { useRef, useState, useEffect } from "react";
import { AiFillEdit, AiFillDelete } from "react-icons/ai";
import { MdDone } from "react-icons/md";
import "./singleTodo.less";

interface Props {
    todo: Todo;
    todos: Todo[];
    setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
}

const index: React.FC<Props> = ({ todo, todos, setTodos }) => {
    const [edit, setEdit] = useState<boolean>(false);
    const [editTodo, setEditTodo] = useState<string>(todo.todo);
    const inputRef = useRef<HTMLInputElement>(null);
    useEffect(() => {
        inputRef.current?.focus();
        return () => {};
    }, [edit]);

    const handleDone = (id: number) => {
        setTodos(
            todos.map((todo) =>
                todo.id == id ? { ...todo, isDone: !todo.isDone } : todo
            )
        );
    };

    const handleDelete = (id: number) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };

    const handleEdit = (e: React.FormEvent<HTMLFormElement>, id: number) => {
        setTodos(
            todos.map((todo) =>
                todo.id == id ? { ...todo, todo: editTodo } : todo
            )
        );
        setEdit(false);
    };
    return (
        <form
            className="todos__single"
            onSubmit={(e) => {
                e.preventDefault();
                handleEdit(e, todo.id);
            }}
        >
            {edit ? (
                <input
                    ref={inputRef}
                    type="text"
                    value={editTodo}
                    onChange={(e) => {
                        setEditTodo(e.target.value);
                    }}
                    className="todo__single--text"
                />
            ) : todo.isDone ? (
                <s className="todos__single--text">{todo.todo}</s>
            ) : (
                <span className="todos__single--text">{todo.todo}</span>
            )}
            <div>
                <span
                    className="icon"
                    onClick={() => {
                        if (!edit && !todo.isDone) {
                            setEdit(!edit);
                        }
                    }}
                >
                    <AiFillEdit />
                </span>
                <span
                    className="icon"
                    onClick={() => {
                        handleDelete(todo.id);
                    }}
                >
                    <AiFillDelete />
                </span>
                <span
                    className="icon"
                    onClick={() => {
                        handleDone(todo.id);
                    }}
                >
                    <MdDone />
                </span>
            </div>
        </form>
    );
};

export default index;
